<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <% include include/link %>
</head>
<body>
<div class="container-fluid widget-stage">
    <h1 class="widget-stage-title">Douyou8UI 项目通用组件库</h1>
    <p class="widget-stage-desc">项目中应当抽取公共的部分以及较为复杂的部分作为组件，方便复用。其中按钮，对话框，遮罩层，下拉菜单，选项卡和文本输入6个组件因为每个项目中都基本会使用到，因此已经由框架预先实现。</p>
    <section class="widget-item">
        <div class="widget-item-title">分页</div>
        <div class="widget-item-cnt">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="pagination1">
                    <li class="disabled">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </section>
    <section class="widget-item">
        <div class="widget-item-title">分页 2</div>
        <div class="widget-item-cnt">
            <nav aria-label="Page" class="pagination-container">
                <span class="pagination-tips">显示总数：</span>
                <span class="pagination-tips">共计100条</span>
                <ul class="pagination pagination-extend" id="pagination2">
                    <li class="disabled">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">100</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
                <!-- Single button -->
                <div class="btn-group">
                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        10 条/页
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">10 条/页</a></li>
                        <li><a href="#">20 条/页</a></li>
                        <li><a href="#">30 条/页</a></li>
                        <li><a href="#">40 条/页</a></li>
                    </ul>
                </div>
                <div class="pagination-jump">
                    <span class="pagination-tips">前往</span>
                    <input type="text" class="form-control" />
                    <span class="pagination-tips">页</span>
                </div>
            </nav>
        </div>
    </section>
</div>
<% include include/footer %>
<script src="https://cdn.bootcss.com/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script>
    $('#pagination1').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        next: '下一页',
        prev: '上一页',
        last: '最后',
        first: '最前',
    });

    var $patination2 = $('#pagination2').twbsPagination({
        totalPages: 35,
        visiblePages: 7
    });

    $('.pagination-jump').find('input').blur(function(){
        $('#pagination2').twbsPagination('destroy');
        $('#pagination2').twbsPagination({
            totalPages: 35,
            visiblePages: 7,
            startPage: parseInt($(this).val())
        });
    });

</script>
</body>
</html>